<template>
	<div class="agentBg">
		<div class="agent">
			<div class="zhanwei"></div>
			<h2>申请成为代理商</h2>
			<div class="form">
				<p>
					<label><span>*</span>申请人姓名</label>
					<input type="text" placeholder="请输入申请人姓名" autocomplete="off" v-model="form.applyName" ref="applyName" />
				</p>
				<p>
					<label><span>*</span>申请人手机</label>
					<input type="text" placeholder="请输入申请人手机号" autocomplete="off" v-model="form.mobileNumber" ref="mobileNumber" />
				</p>
				<p>
					<label><span>*</span>短信验证码</label>
					<input type="text" placeholder="请输入短信验证码" autocomplete="off" v-model="form.verifyCode" ref="verifyCode" />
					<button class="vCode" @click="sendSmsCode" v-model="btnContent" :disabled="disabled" ref="vCode">{{btnContent}}</button>
				</p>
				<p>
					<label><span>*</span>申请区域</label>
					<input type="text" placeholder="请点击选择区域" readonly="readonly" autocomplete="off" @click="chooseCity" v-model="form.areaName" />
				</p>
				<p>
					<label>申请人邮箱</label>
					<input type="text" placeholder="请输入申请人邮箱" autocomplete="off" v-model="form.email" ref="email" />
				</p>
				<p>
					<button class="submit" @click="submit" :disabled="submitDisabled">提交</button>
				</p>
			</div>
		</div>
		<transition name="fade">
			<div class="city" v-if="cityShow" @click="cancel">
				<v-city @cancel="cancel" @complete="complete"></v-city>
			</div>
		</transition>
		<toast v-model="toastShow" type="text" width="20em" :time="1000">{{toastText}}</toast>
	</div>
	
	
</template>

<script>
	import Vcity from 'components/v-city/v-city.vue';
	import { Toast } from 'vux';
	import { _host } from 'api/config.js';
	export default {
		name: 'agent',
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data(){
			return {
				btnContent: '获取验证码',
				disabled: false,
				submitDisabled: false,
				time: 0, //发送验证码间隔时间
				cityShow: false,
				toastShow: false, //是否显示提示
                toastText: '', // 提示文本
				form: {
					applyName: '',
					mobileNumber: '',
					verifyCode: '',
					areaId: '',
					areaName: '',
					areaPath: '',
					email: ''
				}
			}
		},
		methods: {
			chooseCity(){
				this.cityShow = true;
			},
			cancel(){
				this.cityShow = false;
			},
			complete(val){
				this.cityShow = false;
				this.form.areaId = val.areaVal.id ? val.areaVal.id : '';

				let provinceName = val.provinceVal.name ? val.provinceVal.name : '';
				let cityName = val.cityVal.name ? ',' + val.cityVal.name : '';
				let areaName = val.areaVal.name ? ',' + val.areaVal.name : '';
				this.form.areaName = provinceName + cityName + areaName;

				let provinceId = val.provinceVal.id ? val.provinceVal.id : '';
				let cityId = val.cityVal.id ? ',' + val.cityVal.id : '';
				let areaId = val.areaVal.id ? ',' + val.areaVal.id : '';
				this.form.areaPath = provinceId + cityId + areaId;
				// console.log(this.form.areaId, this.form.areaName, this.form.areaPath);
			},
			//获取验证码
			sendSmsCode(){
				if(!this.form.mobileNumber){
					this.toastShow = true;
					this.toastText = '申请人手机号不得为空！';
				}else if(this.form.mobileNumber && !/^1\d{10}$/.test(this.form.mobileNumber)){
					this.toastShow = true;
					this.toastText = '手机号格式不正确！';
				}else{
					let formData = new FormData();
					formData.append('mobileNumber', this.form.mobileNumber);
					this.$http.post(`${_host}/jmjapi/smscenter/smsstream/getVerifyCode`, formData).then((res) => {
						if(res.data.code === '0'){
							this.time = 60;
							this.timer();
						}else{
							this.toastShow = true;
							this.toastText = res.data.msg;
						}
					}).catch((error) => {console.log(error)});
				}
			},
			timer(){
				if(this.time > 0){
				    this.time--;
				    this.btnContent = this.time + "s";
				    this.disabled = true;
				    this.$refs.vCode.style.background = '#ddd';
				    var timer = setTimeout(this.timer, 1000);
			    }else if(this.time == 0){
				    this.btnContent = "获取验证码";
				    clearTimeout(timer);
				    this.disabled = false;
				    this.$refs.vCode.style.background = '#3BAEFC';
				}
			},
			//提交表单
			submit(){
				let addData = this.form;
				var validateResult = this.formValidate(addData);
				if(validateResult.status){
					let formData = new FormData();
					for(let key in addData){
						if(addData[key] !== "" && addData[key] != null && addData[key] !== undefined){
            				formData.append(key, addData[key]); //向formdata对象中添加
          				}
					}
					this.$http.post(`${_host}/webapi/website/agentchannel/add`, formData).then((res) => {
						if(res.data.code === '0'){
							this.toastShow = true;
							this.toastText = res.data.data;
							this.submitDisabled = true;
							setTimeout(() => {
								this.submitDisabled = false;
								this.form = {};
								this.$refs.applyName.style['border-color'] = '#D8D8D8';
								this.$refs.mobileNumber.style['border-color'] = '#D8D8D8';
								this.$refs.verifyCode.style['border-color'] = '#D8D8D8';
								this.$refs.email.style['border-color'] = '#D8D8D8';
								this.$router.push('/agentSuccess');
							}, 1000);
						}else{
							this.toastShow = true;
							this.toastText = res.data.msg;
						}
					}).catch((error) => {console.log(error)});
				}else{
					this.toastShow = true;
					this.toastText = validateResult.msg;
				}
			},
			//表单验证
			formValidate(addData){
				let result = {
					msg: '',
					status: false
				}
				if(!addData.applyName){
					result.msg = '申请人姓名不得为空！';
					// this.$refs.applyName.focus();
					return result;
				}
				if(!addData.mobileNumber){
					result.msg = '申请人手机号不得为空！';
					return result;
				}
				if(addData.mobileNumber && !/^1\d{10}$/.test(addData.mobileNumber)){
					result.msg = '手机号格式不正确！';
					return result;
				}
				if(!addData.verifyCode){
					result.msg = '短信验证码不得为空！';
					return result;
				}
				if(!addData.areaName){
					result.msg = '请点击选择区域！';
					return result;
				}
				if(addData.email && !/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(addData.email)){
					result.msg = '邮箱格式不正确！';
					return result;
				}
				//全部验证通过
				result.msg = "验证成功！";
				result.status = true;
				return result;
			},
		},
		watch: {
			scrollTop(val){
				if(val >= 0){
					this.$emit('bgChange');
				}
			}
		},
		components: {
			'v-city': Vcity,
			Toast
		}
	}
</script>

<style lang="stylus" scoped>
	.agentBg{
		width: 100%;
		height: 11.13rem;
		overflow: hidden;
		.agent{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			background: #fff;
			padding-bottom: 0.4rem;
			.zhanwei{
				width: 100%;
				height: 1rem;
				background: #0D183E;
			}
			h2{
				font-size: 0.34rem;
				color: #333;
				margin: 0.6rem 0 0.4rem 0;
			}
			.form{
				margin: 0.3rem 0;
				p{
					margin-bottom: 0.3rem;
					height: 0.8rem;
					display: flex;
					flex-direction: row;
					align-items: center;
					position: relative;
					label{
						width: 1.7rem;
						height: 0.8rem;
						line-height: 0.8rem;
						display: block;
						font-size: 0.28rem;
						color: #333;
						text-align: right;
						margin-right: 0.1rem;
						span{
							color: #FF2727;
							font-size: 0.3rem;
							margin-right: 0.05rem;
							font-weight: bold;
							vertical-align: middle;
						}
					}
					input{
						width: 4.96rem;
						height: 0.8rem;
						background: #FFFFFF;
						border: 1px solid #D8D8D8;
						border-radius: 0.1rem;
						color: #333;
						text-indent: 0.2rem;
						outline: 0;
						-webkit-transition: 0.2s border-color;
					    -webkit-appearance: none;
						&:focus{
							border-color: #3BAEFC;
						}
						&::-webkit-input-placeholder{
							font-size: 0.28rem;
							color:  #BABABA;
						}
					}
					.vCode{
						width: 1.62rem;
						height: 0.5rem;
						border-radius: 0.1rem;
						text-align: center;
						line-height: 0.5rem;
						background: #3BAEFC;
						color: #fff;
						font-size: 0.24rem;
						position: absolute;
						right: 0.2rem;
						top: 0.15rem;
					}
					.submit{
						width: 100%;
						height: 0.8rem;
						line-height: 0.8rem;
						background: #3BAEFC;
						border-radius: 0.1rem;
						margin-top: 0.5rem;
						text-align: center;
						letter-spacing: 5px;
						color: #fff;
						font-size: 0.3rem;
					}
				}
			}
		}
		.city{
		    position: fixed;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    z-index: 40000;
		    width: 100%;
		    height: 100%;
		    background: rgba(7,17,27,0.5);
		    &.fade-enter-active, &.fade-leave-active{
		        transition: all 0.5s ease;
		        -webkit-transition: all 0.5s ease;
		        opacity: 1;
		        -webkit-opacity: 1;
		    }
		    &.fade-enter, &.fade-leave-to{
		        -webkit-opacity: 0;
		        opacity: 0;
		        // -webkit-transform: translate3d(100%, 0, 0);
		        // transform: translate3d(100%, 0, 0);
		    }
		}
	}
	
</style>
































































